<template>
  <div :class="className" :style="{ height: height, width: width }" ref="chartRef" />
</template>

<script setup>
import * as echarts from 'echarts'
import 'echarts/theme/macarons' // Echarts theme
import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'

const props = defineProps({
  className: {
    type: String,
    default: 'chart'
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '300px'
  },
  name: {
    type: String,
    default: ''
  },
  roseType: {
    type: String,
    default: ''
  },
  colors: {
    type: Array,
    default: () => ['#3aa0ff', '#36cbcb', '#4ecb73', '#fad337', '#f2637b']
  },
  borderWidth: {
    type: Number,
    default: 0
  },
  borderColor: {
    type: String,
    default: ''
  },
  cycle: {
    type: Boolean,
    default: true
  },
  radius: {
    type: Array,
    default: () => ['35%', '65%']
  },
  vertical: {
    type: Boolean,
    default: false
  },
  legendColor: {
    type: String,
    default: ''
  },
  chartData: {
    type: Array,
    required: true
  },
  legend: {
    type: Boolean,
    default: true
  },
  labelColor: {
    type: String,
    default: '#000000'
  },
  labelPos: {
    type: String,
    default: 'center'
  },
  labelShow: {
    type: Boolean,
    default: true
  },
  labelLineShow: {
    type: Boolean,
    default: false
  },
  labelLineLength: {
    type: Number,
    default: 20
  },
  formatter: {
    type: String,
    default: ''
  }
})

const chartRef = ref()
const chart = ref()

const setOptions = (chartData) => {
  const legend = {
    bottom: '2%',
    textStyle: {
      color: props.legendColor
    }
  }
  let center = ['50%', '38%']
  if (props.vertical) {
    legend.orient = 'vertical'
    legend.bottom = 'center'
    legend.right = '0%'
    center = ['30%', '50%']
  }
  let radius = '65%'
  if (props.cycle) {
    radius = props.radius
  }
  let label = {
    show: props.labelShow,
    position: props.labelPos,
    orient: 'vertical',
    overflow: 'truncateText',
    formatter: props.formatter ? props.formatter : '{b}',
    alignTo: 'edge',
    edgeDistance: 10,
    color: props.labelColor
  }

  if (props.labelLineShow) {
    label = {
      color: props.labelColor, // 提示文字颜色
      fontSize: 16 // 提示文字大小
    }
  }
  chart.value?.setOption({
    tooltip: {
      trigger: 'item'
    },
    grid: {
      top: 30,
      containLabel: true
    },
    legend: props.legend ? legend : [],
    color: props.colors,
    series: [
      {
        name: props.name,
        type: 'pie',
        roseType: props.roseType,
        radius: radius,
        center: center,
        avoidLabelOverlap: true,
        itemStyle: {
          borderRadius: 0,
          borderColor: props.borderColor,
          borderWidth: props.borderWidth
        },
        labelLine: {
          show: props.labelLineShow,
          length: props.labelLineLength
        },
        label: label,
        emphasis: {
          label: {
            fontSize: '16',
            fontWeight: 'bold'
          }
        },
        data: chartData
      }
    ]
  })
}

watch(() => props.chartData, (newVal) => {
  setOptions(newVal)
})

onMounted(() => {
  nextTick(() => {
    chart.value = echarts.init(chartRef.value)
    setOptions(props.chartData)
  })
})

onBeforeUnmount(() => {
  if (chart.value) {
    chart.value.dispose()
    chart.value = null
  }
})


</script>
